<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    type?: number
  }>(), {
    type: 31
  }
)
</script>

<template>
  <!-- 普通通知（31） -->
  <view class="message-tips" v-if="props.type === 31">
    <view class="wrapper">
      <slot />
    </view>
  </view>

  <!-- 温馨提示（32） -->
  <view class="message-tips" v-if="props.type === 32">
    <view class="wrapper">
      <text class="label">温馨提示:</text>
      <slot />
    </view>
  </view>
</template>

<style lang="scss">
.message-tips {
  display: flex;
  justify-content: center;
  margin-top: 60rpx;

  &:first-child {
    margin-top: 30rpx;
  }
}

.wrapper {
  line-height: 1;
  text-align: center;
  padding: 20rpx 30rpx;
  // margin-top: 60rpx;
  font-size: 24rpx;
  border-radius: 70rpx;
  color: #848484;
  background-color: #fff;

  .label {
    color: #16c2a3;
  }
}
</style>